import React, { Component } from 'react'

import MyBtn from './MyBtn'


const word = 'React 组件通信 props + state'
const userObj = {
  name: 'ttx',
  age: 18,
  sex: 1,
  avatar: 'xxx-xx-xxxx'
}

export default class MyProps extends Component {
  render() {
    return (
      <div>
        <h3>
          Myprops - Props
        </h3>
        <MyChild {...userObj} userObj={userObj} msg='Hello React + Props' count={4090} word={word}></MyChild>
        <MyChildTwo {...userObj} userObj={userObj} msg='Hello React + Props' count={4090} word={word}></MyChildTwo>
      </div>
    )
  }
}

class MyChild extends Component {

  // 报错
  // changeCount = () => {
  //   this.props.count++
  // }

  render() {
    const { msg, count, word, userObj, age } = this.props

    return (
      <div>
        <h3>子组件</h3>
        <h4>msg = {msg}</h4>
        <h4 onClick={this.changeCount}>count = {count}</h4>
        <h4>word = {word}</h4>
        <h4>name = {userObj.name}</h4>
        <h4>userAge = {age}</h4>
        <MyBtn text='操作'></MyBtn>
      </div>
    )
  }
}

const MyChildTwo = ({
  word,
  count,
  age,
  userObj,
  msg
}) => {
  return (
    <div>
      <h3>MyChildTwo - MyChildTwo</h3>
      <h4>msg = {msg}</h4>
      <h4>word = {word}</h4>
      <h4>count = {count}</h4>
      <h4>age = {age}</h4>
      <h4>userName = {userObj.name}</h4>
    </div>
  )
}
